var myChart;
var vm = new Vue({
    el: '#rrapp',
    data: {
        q:{
            month:'', // 统计月份
        },
        option:{
            color: ['#4472c4','#ed7d31'],
            title: {
                text: '设备故障分类次数统计',
                padding: 10
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['故障次数', '累计百分比'],
                padding: 10
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                },
                {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value} %'
                    }
                }
            ],
            series: [{
                name:'故障次数',
                data: [],
                type: 'bar'
            },
                {
                    name:'累计百分比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: []
                }
            ]
        }
    },
    methods: {
        search: function () {
            var queryString = '';
            if(this.q.month){
                queryString = '?month=' + this.convertGMT2Month(this.q.month);
            }
            myChart.showLoading();
            // 统计设备故障类别次数和累计百分比
            Ajax.request({
                url: "../device/stat/faultTypeTimeAndRate" + queryString,
                type: "GET",
                contentType: "application/json",
                successCallback: function (res) {
                    myChart.hideLoading();
                    var devFaultTypeTimeStat = res.devFaultTypeTimeStat;
                    var option = {
                        xAxis: {
                            type: 'category',
                            data: devFaultTypeTimeStat.xAxisData
                        },
                        series: [{
                            data: devFaultTypeTimeStat.faultTimes
                        },{
                            data: devFaultTypeTimeStat.accumulativeRate
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        },
        resetSearch: function () {
            vm.q.month = '';
            vm.search();
        },
        convertGMT2Month: function(time){
            var date = new Date(time)
            var month = (date.getMonth() + 1);
            return date.getFullYear() + '-' + (month < 10? '0':'') + month;
        }
    },
    mounted: function(){
        // 初始化部门树
        myChart = echarts.init(document.getElementById("container"));
        myChart.setOption(this.option,true);
        this.search();
    }
});
